<!--
 * @Descripttion: 大二一名学习前端开发的计科学生，缓慢成长中！
 * @emial: 2392862431@qq.com
 * @Author: SummerSofts
 * @Date: 2023-08-08 11:34:24
 * @LastEditors: SummerSofts
 * @LastEditTime: 2023-08-08 19:07:44
-->
<template>
<div class="home">
<div class="left">
<div class="listItem" v-for="(item,index) in routeList" :class="{active:currentIndex===index}" :key="index" @click="go(item.name,index)">
  {{ item.name }}
</div>
</div>
<div class="right">
    <router-view></router-view>
</div>
</div>

</template>


<script setup>
import {ref,reactive,onMounted} from "vue"
import {useRoute,useRouter} from "vue-router"
import pages from "../../router/routePage/pages"
const router = useRouter()
//当前路由的索引值
let currentIndex = ref(0)
let routeList = pages[0].children
let go = (name,index)=>{
    currentIndex = index
    router.push({
        path:name
    })
}
</script>


<style lang="less" scoped>
.home{
    display: flex;
    flex-direction: row;
    .left{
        width: 16%;
        height: 90vh;
        overflow-y: auto;
        border-right: 1px solid rgb(237, 237, 242);
        .listItem{
            width: 84%;
            height: 4vh;
            margin: 0 auto;
            line-height: 4vh;
            padding-left: 20px;
            border-radius: 12px;
            font-family: 'Yomogi';
            cursor: pointer;
            margin-top: 10px;
            background-color: rgb(247, 247, 247);
        }
        .active{
            background-color: rgba(128, 207, 221, 0.63);
        }
    }
    .right{
        flex: 1;
        padding-left: 10px;
    }
}
</style>
